<template>
  <div>
    <el-input
      v-model="keyword1"
      size="small"
      :placeholder="placeholder"
      :style="{width: inputWidth }"
      @keyup.enter.native="handleAdd"
    />
    <div class="flex flexwrap mt-8">
      <el-tag
        v-for="(tag,index) in keywordList"
        :key="tag"
        type="info"
        closable
        class="mr-5 mb-5"
        @close="removeLable(index)"
      >
        {{ tag }}
      </el-tag>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword1: "",
      keywordList: [],
    };
  },
  props: {
    value: {
      type: Array,
      default: [],
    },
    inputWidth: {
      type: String,
      default: "290px",
    },
    listlength: {
      type: Number,
      default: 100,
    },
    placeholder:{
      type: String,
      default: '可输入多个，按Enter确认',
    },
  },
  watch: {
    value: {
      handler(val) {
        this.keywordList = val
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleAdd() {
      if (this.keyword1) {
        if (this.keywordList.includes(this.keyword1)) {
          this.$message.warning("标签重复");
          return;
        }
        if (this.keywordList.length >= this.listlength) {
          this.$message.warning("最多只能添加" + listlength + "条");
          return;
        }
        this.keywordList.push(this.keyword1);
        this.keyword1 = "";
        this.$emit("input", this.keywordList);
      }
    },

    removeLable(index) {
      this.keywordList.splice(index, 1);
      this.$emit("input", this.keywordList);
    },
  },
};
</script>
<style lang="scss" scoped>
.mytag {
  position: relative;
  line-height: 24px;
  padding: 0 10px;
  font-weight: 400;
  color: #222;
  margin-right: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  margin-bottom: 8px;
  overflow: hidden;
  white-space: break-spaces;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-color: #5976ef transparent transparent;
    border-style: solid;
    border-width: 10px 10px 0 0;
  }
}
</style>